<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>用户列表</title>
    <link href="../layui-v2.5.6/css/layui.css" rel="stylesheet">
</head>
<body>
<form action="" class="layui-form layui-form-pane" id="searchForm" method="post" style="margin-top: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="userName" name="userName" type="text"/>
        </div>
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input autocomplete="off" class="layui-input" id="passWord" name="passWord" type="text"/>
        </div>
        <button class="layui-btn" lay-filter="searchSubmit" lay-submit="">查询</button>
        <button class="layui-btn layui-btn-primary" type="reset">重置</button>
    </div>
</form>
<table id="list" lay-filter="list"></table>
</body>
<script id="toolbar" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="role-assignment">角色分配</button>
    </div>
</script>
<script src="../jquery/jquery-3.4.1.js"></script>
<script src="../layui-v2.5.6/layui.js"></script>
<script type="text/javascript">
    var pageCurr, tableIns;
    $(function () {
        layui.use('table', function () {
            var table = layui.table;

            tableIns = table.render({
                elem: '#list',
                toolbar: '#toolbar',
                url: 'query',
                method: 'post',//默认：get请求
                cellMinWidth: 80,
                page: true,
                request: {
                    pageName: 'page', //页码的参数名称，默认：page
                    limitName: 'limit' //每页数据量的参数名，默认：limit
                },
                response: {
                    statusName: 'code', //数据状态的字段名称，默认：code
                    statusCode: 200, //成功的状态码，默认：0
                    countName: 'totals', //数据总数的字段名称，默认：count
                    dataName: 'list' //数据列表的字段名称，默认：data
                },
                cols: [[{
                    type: 'radio'
                }, {
                    field: 'id',
                    title: 'ID'
                }, {
                    field: 'userName',
                    title: '用户名',
                    templet: function (d) {
                        var alink = '<a href="javascript:void(0);"'
                        alink += ' onclick="detail('
                        alink += d.id;
                        alink += ')">';
                        alink += d.userName;
                        alink += '</a>';
                        return alink;
                    }
                }, {
                    field: 'passWord',
                    title: '密码'
                }, {
                    field: 'insertUname',
                    title: '添加人'
                }, {
                    field: 'insertTime',
                    title: '添加时间'
                }, {
                    field: 'updateTime',
                    title: '更新时间'
                }]],
                done: function (res, curr, count) {
                    pageCurr = curr;
                }
            });
            table.on('toolbar(list)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data[0];
                switch (obj.event) {
                    case 'add':
                        add();
                        break;
                    case 'edit':
                        if (data) {
                            edit(data.id);
                        } else {
                            layer.msg('请至少选择一条数据');
                        }
                        break;
                    case 'role-assignment':
                        if (data) {
                            updateRole(data.id);
                        } else {
                            layer.msg('请至少选择一条数据');
                        }
                        break;
                    case 'del':
                        if (data) {
                            layer.confirm('确认删除?', function (index) {
                                del(data.id);
                            });
                        } else {
                            layer.msg('请至少选择一条数据');
                        }
                        break;
                }
            });
            layui.use(['form'], function () {
                var form = layui.form;
                var layer = layui.layer;
                form.on('submit(searchSubmit)', function (data) {
                    load(data);
                    return false;
                });
            });
        });
    })

    function load(obj) {
        tableIns.reload({
            where: obj ? obj.field : null,
            page: {
                curr: obj ? 1 : pageCurr
            }
        });
    }

    function add() {
        layer.open({
            type: 2,
            title: '新增用户',
            content: 'edit',
            area: ['50%', '90%'],
            end: function (index, layero) {
                load();
                return false;
            }
        });
    }

    function detail(id) {
        layer.open({
            type: 2,
            title: "用户详情",
            content: 'detail?id=' + id,
            area: ['50%', '90%']
        });
    }

    function edit(id) {
        layer.open({
            type: 2,
            title: "编辑用户",
            content: 'edit?id=' + id,
            area: ['50%', '90%'],
            end: function (index, layero) {
                load();
                return false;
            }
        });
    }

    function updateRole(id) {
        layer.open({
            type: 2,
            title: "编辑用户",
            content: 'updateRole?id=' + id,
            area: ['50%', '90%'],
            end: function (index, layero) {
                load();
                return false;
            }
        });
    }

    function del(id) {
        $.ajax({
            type: "POST",
            url: 'del?id=' + id,
            success: function (data) {
                if (data.status == 0) {
                    layer.alert(data.message, function () {
                        layer.closeAll();
                        load();
                    });
                } else {
                    layer.alert(data.message);
                }
            },
            error: function (data) {
                layer.alert("操作请求错误，请您稍后再试");
            }
        });
    }
</script>
</html>